<template>
  <div>
    <el-dialog :title="title" :visible.sync="editDialog.show" width="1000px">
      <el-form
        :model="editDialog.data"
        size="small"
        :rules="rules"
        ref="ruleForm"
        :label-width="formLabelWidth"
      >
        <el-form-item label="新闻标题" prop="username">
          <el-input v-model="editDialog.data.username" clearable></el-input>
        </el-form-item>

        <el-form-item label="新闻类别">
          <el-select v-model="editDialog.data.password" placeholder="请选择新闻类别">
            <el-option v-for="(item,index) in newCategoryList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="首页缩略图" prop="username">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="列表缩略图" prop="username">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容" prop="username">
          <quill-editor ref="myTextEditor" v-model="editDialog.data.content" :options="editorOption"></quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog.show = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
  props: {
    editDialog: {
      type: Object,
      required: true
    }
  },
   components: {
            quillEditor
        },
  data() {
    return {
      formLabelWidth: "120px",
      title: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      newCategoryList: [],
      fileList:[],
       editorOption: {
                    placeholder: 'Hello World'
                }
    };
  },
  created() {
    if (this.editDialog.type === "add") {
      this.title = "新增";
    } else {
      this.title = "编辑";
    }
  },
  methods: {

    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },




    onSubmit() {
      console.log(this.editDialog.data)
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.onSubmitConfim();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //确定提交
    onSubmitConfim() {
      var obj = {
        id: this.editDialog.data.id,
        password: this.editDialog.data.password,
        username: this.editDialog.data.username
      };
      api
        .editUser(obj)
        .then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功！");
            this.$emit("editSuccess");
            this.editDialog.show = false;
          } else {
            this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type: "error"
          });
        });
    }
  }
};
</script>
